<template>
  <uni-page-wrapper>
    <uni-page-body>
      <!-- 第一次的修改 -->
      <uni-popup ref="popup" type="dialog">
        <uni-popup-dialog
          type="info"
          mode="input"
          :title="popupTitle"
          :placeholder="popupPlaceholder"
          :before-close="true"
          @close="close"
          @confirm="confirm" 
        >
          <input type="text" />
        </uni-popup-dialog>
      </uni-popup>
      <!-- 第二次的提醒 -->
      <uni-popup ref="popup2" type="dialog">
        <uni-popup-dialog
          type="info"
          :title="popup2Title"
          :before-close="true"
          @close="close"
          @confirm="confirm2"
        >
          <input type="text" />
        </uni-popup-dialog>
      </uni-popup>
      <uni-popup ref="popup3" type="dialog">
        <uni-popup-dialog
          type="info"
          :title="popup3Title"
          :before-close="true"
          @close="close"
          @confirm="confirm3"
        >
          <input type="text" />
        </uni-popup-dialog>
      </uni-popup>
      <uni-view class="bg">
        <uni-view class="tit1"
          >{{$t("topup.Please transfer to the following account to recharge")}}</uni-view
        >
        <uni-view class="tit2">{{$t("topup.Average arrival time: 5 minutes")}}</uni-view>
        <uni-view class="list">
          <uni-view class="item">
            <uni-view class="l">{{$t("topup.Bank")}}</uni-view>
            <uni-view class="c">{{ bank }} </uni-view>
            <uni-view class="r">
              <uni-image class="icon">
                <div
                  style="
                    background-image: url('');
                    background-position: 0% 0%;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                  "
                ></div>
                <img
                  src=""
                />
              </uni-image>
              <uni-view class="txt" v-clipboard:copy="bank"
	v-clipboard:success="(type) => onCopyResult('success')"
	v-clipboard:error="(type) => onCopyResult('error')">{{$t("topup.copy")}}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view class="item">
            <uni-view class="l">{{$t("topup.Account no")}}</uni-view>
            <uni-view class="c">{{ accountNo }} </uni-view>
            <uni-view class="r">
              <uni-image class="icon">
                <div
                  style="
                    background-image: url('');
                    background-position: 0% 0%;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                  "
                ></div>
                <img
                  src=""
                />
              </uni-image>
              <uni-view class="txt" v-clipboard:copy="accountNo"
	v-clipboard:success="(type) => onCopyResult('success')"
	v-clipboard:error="(type) => onCopyResult('error')">{{$t("topup.copy")}}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view class="item">
            <uni-view class="l">{{$t("topup.Name")}}</uni-view>
            <uni-view class="c"> {{ name }}</uni-view>
            <uni-view class="r">
              <uni-image class="icon">
                <div
                  style="
                    background-image: url('');
                    background-position: 0% 0%;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                  "
                ></div>
                <img
                  src=""
                />
              </uni-image>
              <uni-view class="txt" v-clipboard:copy="name"
	v-clipboard:success="(type) => onCopyResult('success')"
	v-clipboard:error="(type) => onCopyResult('error')">{{$t("topup.copy")}}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view class="item">
            <uni-view class="l">{{$t("topup.Ifsc code")}}</uni-view>
            <uni-view class="c">{{ ifscCode }} </uni-view>
            <uni-view class="r">
              <uni-image class="icon">
                <div
                  style="
                    background-image: url('');
                    background-position: 0% 0%;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                  "
                ></div>
                <img
                  src=""
                />
              </uni-image>
              <uni-view class="txt" v-clipboard:copy="ifscCode"
	v-clipboard:success="(type) => onCopyResult('success')"
	v-clipboard:error="(type) => onCopyResult('error')">{{$t("topup.copy")}}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view class="item">
            <uni-view class="l">{{$t("topup.Amount")}}</uni-view>
            <uni-input class="input">
              <div class="uni-input-wrapper">
                <input
                  placeholder="Please enter"
                  maxlength="140"
                  step="0.000000000000000001"
                  enterkeyhint="done"
                  autocomplete="off"
                  type="number"
                  class="uni-input-input"
                  @input="onKeyInput('amount', $event)"
                  :value="amount"
                />
              </div>
            </uni-input>
          </uni-view>
        </uni-view>
        <uni-view class="uploadPic" @click="uploadPic">
          <uni-view>
			<image class="upPic" :src='image' v-if="uploaded"></image>
			<image class="icon" :src='"/static/img/pic.5bb89115.png"' v-if="!uploaded"></image>
            <uni-view class="label" v-if="!uploaded">{{$t("topup.Upload payment voucher")}}</uni-view>
          </uni-view>
        </uni-view>
        <uni-view class="goSubmit" @click="transferred"
          >{{$t("topup.I have transferred")}}</uni-view
        >
        <uni-view class="goSubmit" @click="payment">{{$t("topup.Online payment")}}</uni-view>
      </uni-view>
    </uni-page-body>
  </uni-page-wrapper>
</template>

<script>
import service from '@/store/service.js'

import uniPopup from "../../components/uni-popup/uni-popup";
import uniPopupDialog from "../../components/uni-popup-dialog/uni-popup-dialog";


export default {
  components: { uniPopup, uniPopupDialog },
  data() {
    return {
      bank: this.$t("topup.Please click 'online payment'  below ↓↓"),
      accountNo: this.$t("topup.Please click 'online payment'  below ↓↓"),
      name: this.$t("topup.Please click 'online payment'  below ↓↓"),
      ifscCode: this.$t("topup.Please click 'online payment'  below ↓↓"),
      amount: "",
      popupTitle: "",
      popupPlaceholder: "",
      popup2Title: "",
	  popup3Title: '',
	  image:"",
	  pay_money:'',
	  uploaded:false
    };
  },
  mounted(){
	  service.auth(this,service.api.app_getpay,{},function(self,res){
		  self.bank = self.$t("topup."+res.bankname)
		  self.accountNo = self.$t("topup."+res.bankcard)
		  self.name = self.$t("topup."+res.nickname)
		  self.ifscCode = self.$t("topup."+res.zdname)
		  
	  })
  },
  methods: {
    onKeyInput(type, event) {
      this[type] = event.target.value;
    },
    uploadPic() {
		var that = this
		uni.chooseImage({
			count: 1,
			success: function(t) {
				service.upload(that,service.api.app_image,{
					
				},'',t.tempFilePaths[0],'Filedata',function(self,res){
					self.image = res.url
					self.uploaded = true
				})
			},
		})
    },
    transferred() {
      this.popup2Title = this.$t("topup.Please confirm that you have paid");
      this.$refs.popup2.open();
    },
    payment() {
      this.popupTitle = this.$t("topup.Enter the recharge amount");
      this.popupPlaceholder = this.$t("topup.Please enter the recharge amount");
      this.$refs.popup.open();
    },
    close(done) {
      done();
    },

    confirm(done, value) {
		//二次确认
		this.popup3Title = this.$t("topup.Are you sure to recharge?");
		this.$refs.popup3.open();
		this.pay_money = value
		done();
    },
    confirm2(done, value) {
		done()
        uni.showLoading();
		service.auth(this,service.api.app_setpay,{
			amount: this.amount,
			image: this.image
		},function(self,res){
			uni.hideLoading()
		})
    },
    confirm3(done, value) {
		done()
		uni.showLoading()
		service.auth(this,service.api.app_paycreate,{
			pay_money: this.pay_money
		},function(self,res){
			uni.hideLoading()
			uni.navigateTo({
			  url: "/pages/payDesk/payDesk?url="+res.pay_url,
			});
		})
    },
	  onCopyResult(type) {
		if (type==='success') {
			uni.showToast({
				icon:'none',
				title:this.$t("topup.copy successed")
			})
		} else {
			uni.showToast({
				icon:'none',
				title:this.$t("topup.copy failed")
			})
		}
	  }
  },
};
</script>

<style>
@import url(./topUp.css);
</style>